<template>
  <div class="page-content">
    <el-card shadow="never" v-if="detail">
      <el-form ref="form" label-width="9em">
        <el-row :gutter="24">
          <el-col :span="24">
            <h3>订单信息</h3>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采购单号:">{{detail.purchaseNo}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货状态:">{{deliveryStateMap[detail.deliveryState] || '未知'}}</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间:">{{$util.formatDate(detail.createTime)}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付状态:">
              {{payStateMap[detail.payState]}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付方式:">
              {{payTypeMap[detail.payType]}}
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-divider></el-divider>
          </el-col>

          <el-col :span="24">
            <h3>关联销售单</h3>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联订单号:">{{detail.relateOrderIds || '未关联'}}</el-form-item>
          </el-col>

          <!-- 供应商信息 -->
          <el-col :span="24">
            <h3>供应商信息</h3>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司名称:" prop="supplierCompanyName">{{detail.supplierCompanyName}}</el-form-item>
          </el-col>

          <el-col :span="18">
            <el-form-item label="联系电话:" prop="supplierMobile">{{detail.supplierMobile}}</el-form-item>
          </el-col>

          <!-- 收货人信息 -->
          <el-col :span="24">
            <h3>收货人信息</h3>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人:">{{detail.consigneeName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人电话:">{{detail.consigneeMobile}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址:">{{detail.consigneeFullAddress}}</el-form-item>
          </el-col>

          <!-- 收款账号 -->
          <template v-if="detail.accountSupplierName">
            <el-col :span="24">
              <h3>收款账号</h3>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商账号:">{{detail.accountSupplierName}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商公司名称:">{{detail.accountSupplierCompanyName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商手机号:">{{detail.accountSupplierMobile}}</el-form-item>
            </el-col>
          </template>

          <template v-if="detail.accountName">
            <el-col :span="24">
              <h3>收款账号</h3>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收款单位:">{{detail.accountName}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账号:">{{detail.accountNumber}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行:">{{detail.bankName}}</el-form-item>
            </el-col>
          </template>

          <!-- 商品信息 -->
          <el-col :span="24">
            <h3 style="margin-bottom: 20px">商品信息</h3>
          </el-col>
          <el-col :span="24">
            <el-table class="table" :data="detail.orderItems" border empty-text="请添加商品">
              <el-table-column label="添加类型" width="120px" align="center">
                <template slot-scope="{ row }">{{row.type === 1 ? '采购库添加' : '自行填写'}}</template>
              </el-table-column>

              <el-table-column align="center" label="商品类目">
                <template slot-scope="{ row }">{{row.categoryNames ? row.categoryNames.join(',') : '-'}}</template>
              </el-table-column>

              <el-table-column align="center" label="商品名称" prop="name"></el-table-column>
              <el-table-column align="center" label="品牌" prop="brand"></el-table-column>
              <el-table-column align="center" label="规格型号" prop="attribute"></el-table-column>

              <el-table-column align="center" label="商品图片">
                <template slot-scope="{ row }">
                  <el-image
                    v-if="row.picUrl"
                    class="item-img"
                    :src="row.picUrl"
                    :preview-src-list="[row.picUrl]"
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column align="center" label="数量" prop="num"></el-table-column>
              <el-table-column align="right" label="单价（元）" prop="price">
                <template slot-scope="{ row }">
                  <span>{{row.price | formatAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column align="right" label="小计（元）">
                <template slot-scope="{ row }">
                  <span class="red">{{row.totalPrice | formatAmount}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="采购合同">
                <template slot-scope="{ row }">
                  <el-link
                    v-if="row.contractUrl"
                    type="primary"
                    @click="onDownloadContract(row)">下载</el-link>
                  <template v-else> - </template>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col v-if="!isApplyPay" :span="24" class="footer">
            <strong class="price">
              订单总金额：
              <strong class="red">{{detail.totalPrice | formatAmount}}</strong> 元
            </strong>
          </el-col>

          <!-- 支付方式 -->
          <template v-if="isApplyPay">
            <el-col :span="24">
              <h3 style="margin-top: 30px">申请付款</h3>
            </el-col>
            <el-col :span="24">
              <el-form ref="applyPayForm" class="form" label-width="15em" :rules="applyPayRules" :model="applyPayForm">
                <el-form-item label="支付方式">
                  <el-radio-group v-model.number="applyPayForm.payType">
                    <el-radio
                      v-for="(label, value) in payTypeMap"
                      :key="value"
                      :label="~~value"
                    >{{label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <template v-if="applyPayForm.payType === 1">
                  <el-form-item label="妥了网账号" prop="tlwAccount" key="tlwAccount">
                    <el-input style="width: 350px;" v-model.trim="applyPayForm.tlwAccount" placeholder="请输入供应商在妥了网注册的用户名或手机号"></el-input>
                    <span class="red" style="margin-left: 10px;font-size: 12px">*若供应商在妥了网注册并开通妥钱包，则财务可线上付款给供应商；输入的账号为供应商账号，财务将付款给该账号</span>
                  </el-form-item>
                  <el-form-item label="再次输入妥了网账号" prop="tlwAccountConfirm" key="tlwAccountConfirm">
                    <el-input style="width: 350px;" v-model.trim="applyPayForm.tlwAccountConfirm" placeholder="请再次输入供应商在妥了网注册的用户名或手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="计划付款时间" prop="planPayTime" key="planPayTime">
                    <el-date-picker v-model="applyPayForm.planPayTime" placeholder="请选择"></el-date-picker>
                    <span class="red" style="margin-left: 10px;font-size: 12px">*财务会参考该时间进行付款</span>
                  </el-form-item>
                </template>
                <template v-else>
                  <el-form-item label="收款单位" >
                    <el-input style="width: 350px;" v-model.trim="applyPayForm.accountName" placeholder="请输入收款单位"></el-input>
                  </el-form-item>
                  <el-form-item label="银行账号" >
                    <el-input style="width: 350px;" v-model.trim="applyPayForm.accountNumber" placeholder="请输入银行账号"></el-input>
                  </el-form-item>
                  <el-form-item label="开户行" >
                    <el-input style="width: 350px;" v-model.trim="applyPayForm.bankName" placeholder="请输入开户行"></el-input>
                  </el-form-item>
                </template>
                <el-form-item label=" ">
                  <div>
                    应付金额：
                    <strong class="red">{{detail.totalPrice | formatAmount}}</strong> 元
                  </div>
                  <el-button type="primary" @click="onSubmitApplyPay">提交申请</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { detail, applyPay, getDownloadContractUrl } from '@/api/purchase/offlineOrder';
import {
  deliveryStateMap,
  payStateMap,
  payTypeMap,
} from '@/config/purchase/offline';

export default {
  name: 'detail',

  data () {
    return {
      detail: null,
      deliveryStateMap,
      payStateMap,
      payTypeMap,
      applyPayForm: {
        payType: 1,
        tlwAccount: '',
        tlwAccountConfirm: '',
        planPayTime: '',
        accountName: '',
        accountNumber: '',
        bankName: '',
      },
    };
  },

  created () {
    this.getDetail();
  },

  computed: {
    isApplyPay () {
      return !!this.$route.query.isApplyPay;
    },
    applyPayRules () {
      const { payType } = this.applyPayForm;
      if (payType === 1) {
        return {
          tlwAccount: [{ required: true, message: '请输入妥了网账号' }],
          planPayTime: [{ required: true, message: '请选择计划付款时间' }],
          tlwAccountConfirm: [{
            required: true,
            validator: (rule, value, callback) => {
              const { tlwAccount, tlwAccountConfirm } = this.applyPayForm;
              if (tlwAccount !== tlwAccountConfirm) {
                callback(new Error('两次输入的账号不一致'));
              } else {
                callback();
              }
            },
          }],
        };
      } else {
        return {

        };
      }
    },
  },

  methods: {
    async getDetail () {
      const loading = this.$loading();
      try {
        this.detail = await detail(this.$route.params.id);
      } catch (error) {
        this.$router.back();
      }
      loading.close();
    },

    async onSubmitApplyPay () {
      this.$refs.applyPayForm.validate(async valid => {
        if (valid) {
          const loading = this.$loading();
          try {
            const data = {
              purchaseNo: this.detail.purchaseNo,
              payType: this.applyPayForm.payType,
            };
            if (data.payType === 1) {
              data.tlwAccount = this.applyPayForm.tlwAccount;
              data.planPayTime = this.applyPayForm.planPayTime;
            } else {
              data.accountName = this.applyPayForm.accountName;
              data.accountNumber = this.applyPayForm.accountNumber;
              data.bankName = this.applyPayForm.bankName;
            }
            await applyPay(data);
            this.$message.success('申请已提交');
            this.$router.replace(`/purchase/offline/detail/${data.purchaseNo}`);
            this.getDetail();
          } catch (error) {

          }
          loading.close();
        }
      });
    },

    onDownloadContract (row) {
      this.$util.downloadFile(getDownloadContractUrl(row.id));
    },
  },
};
</script>

<style scoped lang="scss">
.page-content {
  max-width: 1400px;
  margin: 0 auto;
}

h3 {
  margin: 12px 0;
  font-size: 16px;
}

.el-form-item {
  margin-bottom: 12px;
}

.form .el-form-item {
  margin-bottom: 22px;
}

.el-divider {
  margin: 12px 0;
}

.red {
  color: red;
}

.item-img {
  width: 50px;
  max-height: 50px;
}

.footer {
  text-align: right;
  margin: 40px 0;

}
.price {
  margin-bottom: 20px;
  font-size: 18px;
}
</style>
